<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编码</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">导航链接1</a></li>
                <li><a href="#">导航链接2</a></li>
                <li><a href="#">导航链接3</a></li>
                <li><a href="#">导航链接4</a></li>
            </ul>
        </nav>
        <img src="jingdong-little.png" alt="google" width="90" height="64">
    </header>
    <div class="content">
        <!--要浮动的元素要放在最前面的位置，否则后面的元素会将位置占据-->
            <aside>
                <div class="aside-title">这里以后是一个侧边栏，这是侧边栏的标题</div>
                <form action="#">
                    <div class="information">
                        <div class="label">请输入邮箱地址</div>&nbsp;&nbsp;
                        <input type="text" placeholder="这是一个文本输入框">
                        <span class="tips">邮箱地址请按要求格式输入</span>
                    </div>
                    <div class="information" style="margin-bottom: -10px;">
                        <div class="label">请输入密码</div>&nbsp;&nbsp;
                        <input type="password">
                    </div>
                    <div class="information">
                        <div class="label">请重复输入密码</div>&nbsp;&nbsp;
                        <input type="password">
                        <span class="tips">密码请为6-16位英文数字</span>
                    </div>
                    <div class="information">
                        <div class="label">性别</div>&nbsp;&nbsp;
                        <input type="radio" name="sex" id="man" checked="checked">
                        <label for="man">男</label>
                        <input type="radio" name="sex" id="woman">
                        <label for="woman">女</label>
                    </div>
                    <div class="information">
                        <div class="label">城市</div>&nbsp;&nbsp;
                        <select name="city" id="city">
                            <option value="beijing" selected="selected">北京</option>
                            <option value="beijing">上海</option>
                            <option value="beijing">天津</option>
                            <option value="beijing">南京</option>
                            <option value="beijing">成都</option>
                            <option value="beijing">重庆</option>
                            <option value="beijing">杭州</option>
                        </select>
                    </div>
                    <div class="information">
                        <div class="label">爱好</div>&nbsp;&nbsp;
                        <input type="checkbox">&nbsp;运动
                        <input type="checkbox">&nbsp;艺术
                        <input type="checkbox">&nbsp;科学
                    </div>
                     <div class="information">
                        <div class="label person">个人描述</div>&nbsp;&nbsp;
                        <textarea name="description" id="" cols="20" rows="7">
                            这是一个多输入的行，请输入您的个人描述。
                        </textarea>
                    </div>
                    <div class="information">
                        <input type="submit" value="确认提交">
                    </div>

                </form>
            </aside>
            <article>
                <h2>文章一级标题</h2>
                <h4>文章二级标题</h4>
                <span>文章作者</span> <span>文章发表时间</span>
                <p>一年之计在于春，经过漫长的冬季，又是开学之际，众多莘莘学子纷纷又回到校园，投入学习之中。百度前端技术学院也在此时为大家带来了一道前端学习的饕鬄盛宴。

                    经过2年多的尝试与摸索，我们确认了实践、交流与分享，对于技术学习而言，是非常有效且高效的手段，因此，本次春季班，我们特别搭建了一个线上平台系统，通过这个系统向学员们发送编码任务，学员们在这个系统上提交作业地址，进行相互的代码评审（Code Review）与评价，同时在平台中积累自己的学习总结笔记并分享给大家。

                    为了让大家更加有动力进行这些学习方式，我们在整个春季班的学习过程中，融入了竞赛模式，任务完成得好的，评价仔细认真的，笔记写得对他人有帮助的，我们都会通过一套积分系统来进行排名。

                    在头一个半月的任务“闯关”之后，我们还特意安排了一个很有挑战性，能够发挥大家创新能力的大任务环节，具体任务当然暂时保密。这个终极BOSS的挑战会作为整个春季班的最终环节。</p>
                </article>
            <article>
                <h2>文章一级标题</h2>
                <h4>文章二级标题</h4>
                <span>文章作者</span> <span>文章发表时间</span>
                <p>一年之计在于春，经过漫长的冬季，又是开学之际，众多莘莘学子纷纷又回到校园，投入学习之中。百度前端技术学院也在此时为大家带来了一道前端学习的饕鬄盛宴。

                    经过2年多的尝试与摸索，我们确认了实践、交流与分享，对于技术学习而言，是非常有效且高效的手段，因此，本次春季班，我们特别搭建了一个线上平台系统，通过这个系统向学员们发送编码任务，学员们在这个系统上提交作业地址，进行相互的代码评审（Code Review）与评价，同时在平台中积累自己的学习总结笔记并分享给大家。

                    为了让大家更加有动力进行这些学习方式，我们在整个春季班的学习过程中，融入了竞赛模式，任务完成得好的，评价仔细认真的，笔记写得对他人有帮助的，我们都会通过一套积分系统来进行排名。

                    在头一个半月的任务“闯关”之后，我们还特意安排了一个很有挑战性，能够发挥大家创新能力的大任务环节，具体任务当然暂时保密。这个终极BOSS的挑战会作为整个春季班的最终环节。</p>
            </article>
            <article>
                <h2>图片</h2>
                <figure>
                    <figcaption>好看的图片</figcaption>
                    <img src="view.jpg" alt="好看的图片" >
                </figure><figure>
                    <figcaption>好看的图片</figcaption>
                    <img src="view.jpg" alt="好看的图片">
                </figure><figure>
                    <figcaption>好看的图片</figcaption>
                    <img src="view.jpg" alt="好看的图片">
                </figure><figure>
                    <figcaption>好看的图片</figcaption>
                    <img src="view.jpg" alt="好看的图片">
                </figure><figure>
                    <figcaption>好看的图片</figcaption>
                    <img src="view.jpg" alt="好看的图片">
                </figure><figure>
                    <figcaption>好看的图片</figcaption>
                    <img src="view.jpg" alt="好看的图片">
                </figure><figure>
                    <figcaption>好看的图片</figcaption>
                    <img src="view.jpg" alt="好看的图片">
                </figure><figure>
                    <figcaption>好看的图片</figcaption>
                    <img src="view.jpg" alt="好看的图片">
                </figure><figure>
                    <figcaption>好看的图片</figcaption>
                    <img src="view.jpg" alt="好看的图片">
                </figure>
            </article>
        <article>
            <h2>这是一个标题</h2>
            <h4>文章二级标题</h4>
            <span>文章作者</span> <span>文章发表时间</span>
            <!--有序列表为ol,无须列表为li-->
            <ol>
                <li>排名一</li>
                <li>排名二</li>
                <li>排名三</li>
            </ol>
            <table>
                <thead>
                    <tr>
                        <th>表头</th>
                        <th>表头</th>
                        <th>表头</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="#">操作</a></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>总计</td>
                        <td colspan="2">1000</td>
                    </tr>
                </tfoot>
            </table>
        </article>
    </div>
    <footer>
        <span>版权所有&copy; DengPan <a href="#">DengPan's Home</a></span>
    </footer>
</body>
</html>